<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :label-width="70" inline>
          <FormItem label="工种">
            <Input v-model="query.workerTwoName" placeholder="请输入查询的工种"></Input>
          </FormItem>
          <FormItem label="任务类型">
            <Input v-model="query.taskInfoType" placeholder="请输入查询的任务类型"></Input>
          </FormItem>
          <FormItem label="城市">
            <Input v-model="query.taskInfoCity" placeholder="请输入查询的城市"></Input>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 185px"></DatePicker>
          </FormItem>
          <FormItem label="任务状态">
            <Select v-model="query.state" style="width: 150px">
              <Option value="">全部状态</Option>
              <Option value="1">启用</Option>
              <Option value="2">禁用</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">查询</Button>
            <Button type="success" @click="add()" style="margin-left: 20px;">新增</Button>
          </FormItem>
        </Form>

        <div class="table-container">
          <Table border :height="530" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据">
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="pageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowEditModel" title="修改数据" @on-ok="submitUpdate">
      <Form :model="rowData" label-position="left">
        <FormItem label="工种">
          <Input type="text" v-model="rowData.workerTwoName"></Input>
        </FormItem>
        <FormItem label="任务类型">
          <Input type="text" v-model="rowData.taskInfoType"></Input>
        </FormItem>
        <FormItem label="城市">
          <Input type="text" v-model="rowData.taskInfoCity"></Input>
        </FormItem>
        <FormItem label="具体地址">
          <Input type="text" v-model="rowData.taskInfoAddress"></Input>
        </FormItem>
        <FormItem label="联系人手机号">
          <Input type="text" v-model="rowData.taskInfoPhone"></Input>
        </FormItem>
        <FormItem label="任务说明">
          <Input type="textarea" v-model="rowData.taskInfoExplain"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="isShowAddModel" title="新增数据" @on-ok="submitAdd">
      <Form :model="addData" label-position="left">
        <FormItem label="工种">
          <Input type="text" v-model="addData.workerTwoName"></Input>
        </FormItem>
        <FormItem label="任务类型">
          <Input type="text" v-model="addData.taskInfoType"></Input>
        </FormItem>
        <FormItem label="城市">
          <Input type="text" v-model="addData.taskInfoCity"></Input>
        </FormItem>
        <FormItem label="具体地址">
          <Input type="text" v-model="addData.taskInfoAddress"></Input>
        </FormItem>
        <FormItem label="联系人手机号">
          <Input type="text" v-model="addData.taskInfoPhone"></Input>
        </FormItem>
        <FormItem label="任务说明">
          <Input type="textarea" v-model="addData.taskInfoExplain"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="showDetail" footer-hide title="任务详情">
      <List border>
        <ListItem><label>发布时间:</label>{{detailData.taskInfoRelease}}</ListItem>
        <ListItem><label>工种:</label>{{detailData.workerTwoName}}</ListItem>
        <ListItem><label>任务类型:</label>{{detailData.taskInfoType}}</ListItem>
        <ListItem><label>城市:</label>{{detailData.taskInfoCity}}</ListItem>
        <ListItem><label>具体地址:</label>{{detailData.taskInfoAddress}}</ListItem>
        <ListItem><label>上车点:</label>{{detailData.taskInfoGeton}}</ListItem>
        <ListItem><label>下车点:</label>{{detailData.taskInfoGetoff}}</ListItem>
        <ListItem><label>联系人手机号:</label>{{detailData.taskInfoPhone}}</ListItem>
        <ListItem><label>薪酬:</label>{{detailData.taskInfoSpecification}}</ListItem>
        <ListItem><label>开始时间:</label>{{detailData.taskInfoHoursuse}}</ListItem>
        <ListItem><label>结束时间:</label>{{detailData.taskInfoHoursu}}</ListItem>
        <ListItem><label>用工时间:</label>{{detailData.taskInfoRecruitime}}</ListItem>
        <ListItem><label>任务说明:</label>{{detailData.taskInfoExplain}}</ListItem>
        <ListItem><label>接单时间:</label>{{detailData.taskInfoReceivtime}}</ListItem>
        <ListItem><label>完成时间:</label>{{detailData.taskInfoCompletime}}</ListItem>
        <ListItem><label>应付款:</label>{{detailData.taskInfoDue}}</ListItem>
      </List>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "project",
  data() {
    return {
      query: {
        workerTwoName: '',
        taskInfoType: '',
        taskInfoCity: '',
        state: '',
        startTime: '',
        endTIme: '',
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      total: 0,
      isShowEditModel: false,
      rowData: {},
      isShowAddModel: false,
      addData: {},
      showDetail: false,
      detailData: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    times(val) {
      this.query.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.query.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    search() {
      this.loadData()
    },
    loadData() {
      let that = this;
      that.$http.postJson('/TaskInfo/TaskInfoList', this.query).then(res => {
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
        that.tableData = res.data ? res.data : []
        that.total = res.total
      }).catch(() => {
        that.pageNum = 1
        that.pageSize = 10
        that.tableData = []
        that.total = 0
      })
    },
    add() {
      this.isShowAddModel = true
    },
    getCols() {
      let that = this;
      return [
        {title: '发布时间', key: 'taskInfoRelease', tooltip: true, align: 'center', width: 180},
        {title: '工种', key: 'workerTwoName', tooltip: true, align: 'center', width: 200},
        {title: '任务类型', key: 'taskInfoType', tooltip: true, align: 'center', width: 180},
        {title: '城市', key: 'taskInfoCity', tooltip: true, align: 'center', width: 130},
        {title: '详细地址', key: 'taskInfoAddress', tooltip: true, align: 'center'},
        {title: '手机号', key: 'taskInfoPhone', tooltip: true, align: 'center', width: 180},
        {title: '任务说明', key: 'taskInfoExplain', tooltip: true, align: 'center', width: 180},
        {
          title: '状态', key: 'taskInfoStatus', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {
                type: obj.row.taskInfoStatus === "1" ? "success" : "error"
              },
              on: {
                click: () => {
                  that.deleteTask(obj.row)
                }
              }
            }, obj.row.taskInfoStatus === "1" ? "启用" : "禁用")
          }
        },
        {
          title: '操作', key: 'operator', tooltip: true, align: 'center', width: 200, render(h, obj) {
            return h(('div'), [
              h(('Button'), {
                attrs: {
                  type: 'success'
                },
                on: {
                  click() {
                    that.editInfo(obj.row)
                  }
                }
              }, '编辑'),
              h(('Button'), {
                attrs: {type: 'success', style: 'margin-left:10px;'}, on: {
                  click: () => {
                    that.detail(obj.row);
                  }
                }
              }, '详情')
            ])
          }
        }
      ]
    },
    pageChange(val) {
      this.query.pageNum = val
      this.loadData()
    },
    deleteTask(row) {
      let that = this;
      row.taskInfoStatus = row.taskInfoStatus === "1" ? "2" : "1"
      that.$http.postJson('/TaskInfo/TaskInfoDel', row).then(res => {
        that.$Message.success("修改任务状态成功")
        that.loadData()
      }).catch(() => {
        that.$Message.success("修改任务状态失败")
        that.loadData()
      })
    },
    submitUpdate() {
      let that = this;
      that.$http.postJson('/TaskInfo/TaskInfoUpdate', this.rowData).then(res => {
        that.$Message.success("更新信息成功")
        that.loadData()
      }).catch(() => {
        that.$Message.success("更新信息失败")
        that.loadData()
      })
    },
    submitAdd() {
      let that = this;
      that.$http.postJson('/TaskInfo/TaskInfoAdd', this.addData).then(res => {
        that.$Message.success("新增任务成功")
        that.loadData()
      }).catch(() => {
        that.$Message.success("新增任务失败")
        that.loadData()
      })
    },
    detail(row) {
      let that = this;
      that.$http.get('/TaskInfo/TaskInfoOne?taskInfoId=' + row.taskInfoId).then(res => {
        that.showDetail = true
        that.detailData = res
      }).catch(() => {
        that.$Message.error("获取详情失败")
      })
    },
    editInfo(row) {
      this.isShowEditModel = true
      this.rowData = row
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
.table-wrap{
  width: 1600px;
}
</style>
